<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件处理</title>
</head>
<body>
<div id="root">

</div>
</body>
<script src="js/old/babel.min.js"></script>
<script src="js/old/react.development.js"></script>
<script src="js/old/react-dom.development.js"></script>
<script type="text/babel">
  const Login = props => {
    const username = React.useRef()
    const password = React.useRef()
    const handleHref = e => {
      // 阻止默认事件
      e.preventDefault()
      alert('to baidu: ' + typeof e)
      console.log(e)
    }

    const handleSubmit = e => {
      e.preventDefault()

      const [un, pwd] = [username.current.value, password.current.value]
      console.log(un, pwd)
    }
    return (
      <React.Fragment>
        <a href="https://www.baidu.com" onClick={handleHref}>to Baidu</a>
        <div className="login">
          <form onSubmit={handleSubmit} action="#" method="post">
            <fieldset>
              <label htmlFor="username">
                用户名: <input ref={username} type="text" name="username" id="username"/> <br/>
              </label>
              <label htmlFor="password">
                密码: <input ref={password} type="password" name="password" id="password"/> <br/>
              </label>
            </fieldset>
            <input type="submit" value="submit"/>
          </form>
        </div>
      </React.Fragment>
    )
  }

  ReactDOM.render(<Login/>, document.getElementById('root'))
</script>
</html>